<template>
	<view class="page-view">
		<view class="search-wrap">
			<u-search placeholder="请输入井点" v-model="keyword" :showAction="true"
				actionText="取消" @custom="handleCancle" @change="handleChange"
				:actionStyle="{'color':'#3576F2', 'font-size': '32rpx'}"
				:inputStyle="{'hieght': '112rpx'}" height="70rpx"></u-search>
		</view>
		<view v-if="showSearchResult" class="search-result-wrap">
			<scroll-view v-if="wellList.length" scroll-y="true" class="scroll-Y">
				<view v-for="item in wellList" :key="item.id" class="scroll-item"
					@click="backShowWellInfo(item)">
					<text>{{item.pipNo || '--'}}</text>
					<view class="icon-arrow-custom">
						<u-icon name="arrow-leftward"></u-icon>
					</view>
				</view>
			</scroll-view>
			<view v-else class="default-tip">暂无此井点</view>
		</view>
	</view>
</template>
<script>
	import {
		debounce
	} from '@/utils/fun.js';
	import {
		getWellList
	} from '@/api/equipmentInstallation.js';
	export default {
		data() {
			return {
				eventChannel: null,
				showSearchResult: false,
				keyword: '', // 管点名称(井点)
				wellList: [],
				timer: null,
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			this.eventChannel = eventChannel;
			this.handleChange = debounce(this.handleChange, 200);
		},
		methods: {
			handleCancle() {
				this.keyword = '';
				this.showSearchResult = false;
				this.wellList = [];
			},
			async handleChange() {
				const keyword = this.keyword;
				if (!keyword || (keyword && keyword.length < 4)) {
					return;
				}
				try {
					const param = {
						keyword
					};
					const res = await getWellList(param);
					console.log('检索', res)
					this.wellList = res.data.result.records || [];
					this.showSearchResult = true;
				} catch (err) {
					this.showSearchResult = false;
					uni.toast({
						title: err.msg || '查询失败！',
						icon: 'error'
					});
					//TODO handle the exception
				}
			},
			backShowWellInfo(wellInfo) {
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit('viewWellInfo', wellInfo);
					}
				});
			},
		},
	}
</script>
<style scoped lang="scss">
	.page-view {
		height: 100vh;
		background-color: #fff;
	}

	.search-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 112rpx;
		padding: 0 32rpx;
	}

	.search-result-wrap {
		height: calc(100% - 112rpx);
		padding: 0 32rpx;
	}

	.scroll-Y {
		height: 100%;
	}

	.scroll-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		font-size: 32rpx;
		color: #3576F2;
	}

	.icon-arrow-custom {
		transform: rotate(45deg);
	}
	.default-tip{
		padding-top: 240rpx;
		text-align: center;
		font-size: 36rpx;
		color: #00000066;
	}
</style>